﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/Content/css/layout.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.12.1.min.js"></script>
    <script src="/Scripts/bootstrap-3.3.5-dist/js/modal.js"></script>
    <style>
        .map {
            width: 1500px;
            height: 1080px;
            background: url(../../Content/images/map1.png) no-repeat center;
            background-size: contain;
        }

        .location {
            color: #fff;
            position: absolute;
            top: 100px;
            left: 100px;
        }

            .location:before {
                content: "";
                width: 30px;
                height: 45px;
                display: block;
                margin: auto;
                margin-bottom: 10px;
                background: url(../../Content/images/location.png) no-repeat center;
                background-size: contain;
            }

            .location:after {
                content: "";
                position: absolute;
                top: 45px;
                left: 0;
                right: 0;
                margin: auto;
                width: 25px;
                height: 7px;
                border-radius: 100%;
                background: url(../../Content/images/location-shadow.png) no-repeat center;
                background-size: contain;
            }

            .location span.t {
                position: relative;
                top: -75px;
            }

            .location span.lt {
                position: relative;
                left: -50px;
                top: -45px;
            }

            .location span.br {
                position: relative;
                right: -31px;
                bottom: 7px;
            }
    </style>
</head>

<body>
    <div class="map central" id="map">
        <a href="javascript:;" class="location" data-id='652D1595-7490-4811-A8E0-A65FCCC80A60' style="top: 380px; left: 240px;">LUXEMBOURG</a>
        <a href="javascript:;" class="location" data-id='0873C096-F62C-4C71-BAD0-414D110A9E1C' style="top: 453px; left: 1180px;">MICHIGAN, USA</a>
        <a href="javascript:;" class="location" data-id='628d37d2-ea8b-4ae6-a775-ac7b07ce0a83' style="top: 500px; left: 580px;">R&D CHINA</a>
        <a href="javascript:;" class="location" data-id='6303a74a-259d-4722-8869-ee726a09ea0d' style="top: 510px; left: 1110px;">R&D MEXIC</a>
    </div>
    <div class="modal-container">
        <div class="modal-wrapper">
            <div class="modal-content"></div>
        </div>
    </div>
    <nav>
        <a href="Index.html" class="home"></a>
        <a href="Index.html" class="back"></a>
        <a href="" class="refresh"></a>
    </nav>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 1000px; height:565px; margin-top: 10%; margin-left:23%; border: 3px solid #171717; background:rgba(255,255,255,.8) ">
                <div class="modal-body">
                    <div class="news-html">
                        <div class="n-header" style="width:100%; height:50px;">
                            <span id="n-title" style="font-size:37px; font-weight:bold; margin-left:53px;"></span>
                            <img style="float:right;" src="/Content/images/close.png" onclick="$('#myModal').modal('hide');" />
                        </div>
                        <div class="n-content" style="height:500px; margin-top:20px;">
                            <div class="cover" style="text-align:center;">
                                <img id="n-cover" style="height:430px; width:90%;" />
                            </div>
                            <!--<div class="n-text" id="n-text" style="padding-top:25px;"></div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    $('#map a').click(function () {
        var ID = $(this).attr('data-id');

        $.ajax({
            url: '/api/CommonApi?API=Corey_GetNews',
            type: 'get',
            data: { ID: ID },
            dataType: 'json',
            success: function (data) {
                if (data.Success) {
                    var ApiParamObj = data.ApiParamObj;
                    $('#n-title').html(ApiParamObj.Title);
                    $('#n-cover').attr('src', ApiParamObj.CoverURL);
                    $('#n-text').html(ApiParamObj.HTML);
                    $('#myModal').modal();;
                }
            }
        });

    });
    </script>

</body>
</html>